<!--
  HomePage.vue

  主页面布局组件

  该组件是东营旅游路线规划Web客户端的主布局页面，提供侧边栏导航和顶部栏。
  包含用户信息显示和退出登录功能，通过RouterView加载子页面内容。
-->
<script setup lang="ts">
/**
 * Vue核心功能导入
 */
import { ref } from 'vue' // 导入响应式API

/**
 * Vue Router导入
 * 用于页面导航和子路由渲染
 */
import { RouterView, useRouter } from 'vue-router'

/**
 * Element Plus图标导入
 * 提供UI界面所需的图标
 */
import { Menu as IconMenu, Reading } from '@element-plus/icons-vue'

/**
 * 状态管理导入
 * 用于存储和管理用户认证状态
 */
import { useUserStore } from '@/stores'

/**
 * Element Plus组件导入
 * 提供UI交互组件
 */
import { ElMessageBox } from 'element-plus' // 消息对话框组件

/**
 * 侧边栏状态控制
 * 控制侧边栏的折叠/展开状态
 */
const isCollapse = ref(false) // 默认展开状态

/**
 * 路由和状态管理实例
 */
const router = useRouter() // 路由实例，用于页面导航
const userStore = useUserStore() // 用户状态存储实例

/**
 * 退出登录功能
 * 清除用户认证状态并返回登录页
 */
const logout = async () => {
  // 显示确认对话框
  await ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
    type: 'warning', // 警告类型，显示黄色图标
    confirmButtonText: '确认', // 确认按钮文本
    cancelButtonText: '取消', // 取消按钮文本
  })

  // 用户确认后执行退出操作
  userStore.removeToken() // 清除认证令牌
  router.push('/login') // 导航到登录页
}
</script>

<template>
  <!--
    主布局容器
    使用Element Plus的容器组件实现经典的管理系统布局
  -->
  <el-container class="layout-container">
    <!-- 侧边栏Logo占位 -->
    <div class="el-aside__logo"></div>

    <!-- 侧边栏区域 -->
    <el-aside width="200px">
      <!-- Logo区域 - 显示系统Logo -->
      <div class="el-aside__logo"></div>

      <!--
        主导航菜单
        :default-active="$route.path" - 根据当前路由路径自动高亮对应菜单项
        :collapse - 控制菜单折叠/展开状态
        背景色为深色(#232323)，文字为白色，选中项为黄色(#ffd04b)
      -->
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical"
        :collapse="isCollapse"
        background-color="#232323"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!--
          子菜单
          router属性开启后，el-menu-item的index值将作为导航路径
        -->
        <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          :default-active="$route.path"
          text-color="#fff"
          router
        >
          <!-- 景点信息管理菜单项 -->
          <el-menu-item>
            <el-icon><Reading /></el-icon>
            <span>景点信息管理</span>
          </el-menu-item>
        </el-menu>
      </el-menu>
    </el-aside>

    <!-- 主内容区容器 -->
    <el-container>
      <!--
        顶部栏
        包含菜单折叠按钮、欢迎信息和退出按钮
      -->
      <el-header height="60px">
        <!-- 左侧区域 - 菜单折叠按钮 -->
        <div class="header-left">
          <el-icon class="toggle-button" @click="isCollapse = !isCollapse">
            <IconMenu />
          </el-icon>
        </div>

        <!-- 中间区域 - 欢迎信息 -->
        <div class="header-center" style="flex: 1; text-align: center">
          <span>欢迎您，景点管理人员</span>
        </div>

        <!-- 右侧区域 - 退出登录按钮 -->
        <div class="header-right">
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-header>

      <!--
        主内容区
        通过RouterView动态加载子路由组件
      -->
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss">
/**
 * 全局样式
 * 这些样式会影响整个应用
 */

/* 全局样式重置 - 确保所有元素的盒模型一致 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面基础样式 - 确保内容不溢出视口 */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止出现滚动条 */
}

/* 容器基础样式 - 确保容器占满整个视口 */
.el-container {
  height: 100vh; /* 视口高度 */
  width: 100%;
}

/* 侧边栏样式 */
.el-aside {
  width: auto !important; /* 覆盖默认宽度，使其能够响应折叠状态 */

  /* Logo样式 */
  &__logo {
    height: 120px;
    /* 设置Logo背景图，居中显示，固定大小 */
    background: url('@/assets/sunzi.jpg') no-repeat center / 120px auto;
  }

  /* 移除菜单右侧边框 */
  .el-menu {
    border-right: none;
  }
}

/* 展开状态的菜单宽度 */
.el-menu:not(.el-menu--collapse) {
  width: 200px;
}

/* 折叠状态的菜单宽度 */
.el-menu--collapse {
  width: 64px;
}
</style>

<style lang="scss" scoped>
/**
 * 组件局部样式
 * 这些样式只会影响当前组件
 */

/* 主布局容器样式 */
.layout-container {
  width: 100%;
  height: 100vh;
  /* 固定定位，确保布局覆盖整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* 侧边栏样式 */
  .el-aside {
    height: 100%;
    background-color: #000000; /* 黑色背景，与菜单背景形成层次 */
    transition: width 0.3s; /* 平滑过渡宽度变化 */
  }

  /* 主内容区容器样式 */
  .el-container {
    width: calc(100% - 200px); /* 宽度为视口减去侧边栏宽度 */
    height: 100%;
  }

  /* 顶部栏样式 */
  .el-header {
    background-color: #fff; /* 白色背景 */
    border-bottom: 1px solid #e6e6e6; /* 浅灰色底部边框 */
    display: flex; /* 使用Flex布局 */
    align-items: center; /* 垂直居中对齐 */

    /* 左侧区域样式 - 包含折叠按钮 */
    .header-left {
      .toggle-button {
        font-size: 20px; /* 图标大小 */
        cursor: pointer; /* 鼠标悬停时显示手型光标 */
        &:hover {
          color: #409eff; /* 悬停时变为蓝色，提供视觉反馈 */
        }
      }
    }
  }
}
</style>
